<template>
	<view>
		<!-- 背景圖 -->
		<image class="backImage" src="http://139.159.229.212:8889/index/fujiajia/矩形111.png" mode="widthFix"></image>

		<view class="container">


			<!-- 錢包 -->
			<view class="money-bag">
				<image class="money-bag-image" src="http://139.159.229.212:8889/index/fujiajia/矩形 1332.png" mode="">
				</image>
				<!-- 用戶信息 -->
				<view class="user-info">
					<view class="user-info-left">
						<image class="user-info-image" src="/static/share.gif" mode=""></image>
						<view class="user-info-name">
							<view class="name">{{userInfo.name}}</view>
						</view>
					</view>
				</view>
				<!-- 信息 -->
				<view class="information">
					<view class="balance-section" v-for="item in info">
						<view class="balance-label">
							<view class="label-text">
								{{item.title}}
							</view>
							<view class="balance-value">
								{{item.money}}元
							</view>
						</view>
						<view class="withdrawal-history-section">
							<view class="withdrawal-history-label">
								{{item.btnName}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 粉絲內容 -->
			<view class="small-assistant">
				<view class="income-content">
					<view class="income-title">
						收入明细
					</view>
					<view class="income">
						<view class="income-item" v-for="item in incomeList">
							<view class="income-item-left">
								<view class="income-name">
									{{item.incomeName}}
								</view>
								<view class="income-time">
									{{item.time}}
								</view>
							</view>
							<view class="income-item-right">+{{item.money}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部tabbar -->
		<tabBar :selectIndex="selectIndex"></tabBar>
	</view>
</template>

<script>
	import tabBar from "../components/tabBar/index.vue"
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				selectIndex: 2,
				userInfo: {
					name: "今天喝咖啡",
					uid: 16260,
					contribute: 0,
					post: "业务员"
				},
				info: [{
						title: "账号余额",
						money: '0000.00',
						url: "",
						btnName: "提现明细"
					},
					{
						title: "累计收入",
						money: '0000.00',
						url: "",
						btnName: "去转账"
					},
					{
						title: "可提现金额",
						money: '0000.00',
						url: "",
						btnName: "去提现"
					},
					{
						title: "报单余额",
						money: '0000.00',
						url: "",
						btnName: "历史收入"
					},
				],
				incomeList: [{
					incomeName: '消费收入',
					money: '1000',
					time: '2018-02-27 13:23:32'
				}, ]
			};
		}
	}
</script>

<style lang="less" scoped>
	.backImage {
		width: 100%;
		position: absolute;
		left: 0%;
	}

	.container {
		padding-top: 60rpx;
		padding-bottom: 20rpx;
		width: 690rpx;
		margin: auto;
		position: relative;

		.money-bag {
			padding-top: 30rpx;
			height: 297rpx;
			margin-bottom: 60rpx;

			.user-info {
				padding-top: 10rpx;
				width: 90%;
				margin: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;

				.user-info-left {
					display: flex;

					.user-info-image {
						width: 117rpx;
						height: 117rpx;
						border-radius: 100rpx;
					}

					.user-info-name {
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						padding: 10rpx 20rpx;

						.name {
							padding: 10rpx 0;
							font-size: 30rpx;
						}
					}
				}

				.user-info-right {
					text-align: center;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.medal {
						width: 51rpx;
						height: 58rpx;
						margin-bottom: -5rpx;
					}

					.post {
						width: 98rpx;
						height: 38rpx;
						position: relative;
						color: #fff;
						padding: 10rpx 0;

						.gradient {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 50%;
							transform: translate(-50%, 0);
						}

						view {
							z-index: 16;
							position: relative;
							line-height: 38rpx;
							transform: scale(0.8) !important;
							font-size: 16rpx;
						}
					}
				}
			}

			.information {
				position: relative;
				margin: auto;
				width: 90%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				text-align: center;
				font-size: 24rpx;
				color: #fff;

				.label-text {
					font-size: 26rpx;
					font-weight: bold;
				}

				.withdrawal-history-label {
					padding: 5rpx 10rpx;
					border: 2rpx solid #fff;
					border-radius: 10rpx;
					margin-top: 15rpx;
					min-width: 120rpx;
				}
			}

			.shopTitle {
				font-size: 30rpx;
				font-weight: bold;
			}

			.money-bag-image {
				width: 100%;
				height: 297rpx;
				position: absolute;
			}

			.money-bag-content {
				position: relative;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 126rpx;

				.money-content-left {
					color: #FFF;

					view {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						padding: 4rpx 0;

						image {
							vertical-align: middle;
							margin-right: 10rpx;
							width: 34rpx;
							height: 34rpx;
						}
					}
				}
			}
		}

		.small-assistant {
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx;
			margin-top: 30rpx;
			padding: 20rpx 30rpx;
			min-height: 975rpx;
			position: relative;

			.income {
				padding: 20rpx 0;
			}

			.income-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #f6f6f6;

				.income-item-left {
					display: flex;
					justify-content: space-between;
					flex-direction: column;

					.income-name {
						padding-bottom: 10rpx;
					}

					.income-time {
						color: #999999;
						font-size: 24rpx;
					}
				}

				.income-item-right {
					color: #f76e00;
				}
			}
		}
	}
</style>